<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
html{
    cursor: url(./cursor/puntero.cur),auto;
}
        li {
            font: 22px/30px "simsun";
            cursor: pointer;
            margin: 5px;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //高大上隔行变色
            fn();

            //鼠标进入高亮显示
            $("ul li").mouseover(function () {
                fn();
                $(this).css("background", "red");
                $(this).css("cursor","url(./cursor/link.cur),auto")
            });




            //隔行变色
            function fn() {
                $("ul li:odd").css("background", "skyblue");
                $("ul li:even").css("background", "yellowgreen");
            }
        });
    </script>
</head>

<body>
    <ul>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
    </ul>
</body>

</html>